<template>
  <div>
    <!-- 一,渲染
    1.1准备数据
    1.2使用v-for循环渲染页面
    1.3使用v-model双向绑定选框 -->
    <span>全选:</span>
    <!-- 全选框 -->
    <input v-model="isAll" type="checkbox" />
    <button >反选</button>
    <ul>
      <!-- 小选框 -->
      <!-- v-for  遍历数组 -->
      <li v-for="(item,index) in arr" :key="index">
        <!-- 双向绑定name和c绑定 -->
        <input v-model="item.c" type="checkbox" />
        <span>{{item.name}}</span>
      </li>
    </ul>
  </div>
</template>

<script>

export default {
  data() {
    return {
      arr: [
        {
          name: "猪八戒",
          c: false,
        },
        {
          name: "孙悟空",
          c: false,
        },
        {
          name: "唐僧",
          c: false,
        },
        {
          name: "白龙马",
          c: false,
        },
      ],
    };
  },
  computed: {
    //需要完整写法
    isAll:{
      get(){
        //必须要有return
        //这个返回值根据所有小选框
         return this.arr.every(item=>item.c)
      },
      set(val){
        this.arr.forEach(item =>item.c=val);
      }

    }
  }
};
</script>

<style>
</style>